<template>
    <div id="m">
        <div class="t">修改课程信息</div>
        <el-form ref="form" :model="course" label-width="80px">
        <el-form-item label="课程名称">
            <el-input v-model="course.course_name"></el-input>
        </el-form-item>
        <el-form-item label="课程类型">
            <el-radio-group v-model="course.category">
                <el-radio-button label="1">必修课</el-radio-button>
                <el-radio-button label="2">选修课</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="绑定专业" v-show="course.category==1">
            <el-select v-model="course.major_name" placeholder="请选择专业" style="width: 460px;">
                <el-option v-for="m in majorData" :key="m" :label="m" :value="m"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="modifyCourse" style="margin-top: 20px; margin-right: 60px;">修改</el-button>
            <el-button type="warning" @click="cancel">取消</el-button>
        </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name:"AddCourse",
        data() {
            return {
                course:{
                    course_id:"",
                    course_name:"",
                    category:"",
                    major_name:"",
                },
                majorData:[],
            }
        },
        created() {
            this.getCourseId();
            this.getData();
            this.toPage();
        },
        methods: {
            toPage() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/course/toModifyCoursePage',
                    params:{
                        course_id:this.course.course_id,
                    }
                }).then(res=>{
                    this.course=res.data.data;
                }).catch(err=>{
                    console.log(err);
                })
            },
            getData() {
                this.$axios({
                    methods:'get',
                    url:'http://localhost:8081/workbench/course/getMajorData',
                }).then(res=>{
                    this.majorData=res.data.data;
                }).catch(err=>{
                    console.log(err);
                })
            },
            modifyCourse() {
                this.$axios({
                    method:'post',
                    url:'http://localhost:8081/workbench/course/modifyCourseById',
                    data:this.course
                }).then(res=>{
                    this.cancel();
                }).catch(err=>{
                    console.log(err);
                })
            },
            cancel() {
                this.$router.replace({
                    path:'/home/course/query', 
                })
            },
            getCourseId() {
                this.course.course_id=this.$route.params.course_id;
            }
        }
    }
</script>

<style>
    #m {
        width: 700px;
        height: 500px;
        margin: 150px auto;
        border: 1px rgb(190, 190, 190) solid;
        border-radius: 20px;
        box-shadow: 10px 10px 5px rgba(205, 203, 203, 0.9);
        /* float: right; */
        z-index: 40;
        position: absolute;
        top: 80px;
        left: 500px;
        background-color: #ffffffee;
    }
    .t {
        font-weight: 800;
        margin: 50px 0px;
        font-size: 30px;
    }
</style>